<template>
  <div id="shuziren">
    <!-- 导航 -->
    <div class="all-tab-2">
      <div
        v-for="(item, index) in tabList"
        :key="index"
        :class="{ active: index === activeIndex }"
        @click="setActiveIndex(index)"
      >
        <router-link :to="item.path">{{ item.title }}</router-link>
      </div>
    </div>
    <div class="view-content">
      <!-- 二级路由 -->
      <router-view />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: 0,
      tabList: [
        {
          title: "教师信息",
          path: "/user",
        },
        // {
        //   title: "学生信息",
        //   path: "/user/studentlist",
        // },
      ],
    };
  },
  // watch: {
  //   $route(to) {
  //     const index = this.tabList.findIndex((item) => item.path === to.path);
  //     if (index !== -1) {
  //       this.activeIndex = index;
  //     }
  //   },
  // },
  created() {
    const index = this.tabList.findIndex(
      (item) => item.path === this.$route.path
    );
    if (index !== -1) {
      this.activeIndex = index;
    }
  },
  methods: {
    setActiveIndex(index) {
      this.activeIndex = index;
    },
  },
};
</script>
<style lang="scss" scoped>
#shuziren {
  margin-bottom: 20px;
  .all-box {
    padding: 20px;
    box-sizing: border-box;
  }
  .view-content {
    padding-top: 10px;
    .one-btns {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 12px;
    }
  }
}
</style>